<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!--在这里写你的css-->
<div th:fragment="stylesheet">
    <link rel="stylesheet" href="/static/common/assets/vendor/datatables/css-main/jquery.dataTables.min.css">
    <link rel="stylesheet" href="/static/common/assets/vendor/datatables/css-bootstrap/dataTables.bootstrap.min.css">
</div>
<!--在这里写你的内容-->

<body id="test" th:fragment="content">
<div class="panel" style="padding: 10px">
    <div class="panel-heading">
        <h3 class="panel-title">查看客户信息</h3>
    </div>
    <div class="panel-body">
        <div style="text-align: right">
            手机号：<input id="searchId" type="text" class="form-control" style="width: 100px;display: inline">
            <button id="search" class="btn btn-default">搜索</button>
        </div>
        <table id="datatable-column-filter" class="table table-striped table-hover">
            <thead>
            <tr>
                <th>手机号</th>
                <th>真实姓名</th>
                <th>性别</th>
                <th>文化程度</th>
                <th>所在地</th>
                <th>职业</th>
                <th>婚姻状况</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tbody">
            <tr th:each="user:${users}">
                <td style="width:10% " th:text="${user.telephone}"></td>
                <td style="width:10%" th:text="${user.realName}"></td>
                <td style="width:5%" th:text="${user.sex}"></td>
                <td style="width:10%" th:text="${user.education}"></td>
                <td style="width:20%" th:text="${user.location}"></td>
                <td style="width:15%" th:text="${user.job}"></td>
                <td style="width:10%" th:text="${user.marry}"></td>
                <td style="width: 10%">
                    <nobr>
                        <button th:id="'del'+${user.telephone}" class="btn btn-success btn-sm" style="padding: 6px"
                                th:data-id="${user.telephone}" data-target="#detailModal" data-toggle="modal">详情
                        </button>
                        <button th:id="'edit'+${user.telephone}" class="btn btn-primary btn-sm" style="padding: 6px"
                                th:data-id="${user.telephone}" data-target="#editModal" data-toggle="modal">编辑
                        </button>
                        <button th:id="'del'+${user.telephone}" class="btn btn-danger btn-sm" style="padding: 6px"
                                th:data-id="${user.telephone}" data-target="#delModal" data-toggle="modal">删除
                        </button>
                    </nobr>
                </td>
            </tr>

            </tbody>
        </table>
        <div id="paginationBar" style="text-align: center; bottom: 0%; position: center">
            <ul id="pageLimit"></ul>
        </div>
    </div>
</div>
<!-- END FILTER COLUMN -->
<!-- 删除-模态框（Modal） -->
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="delModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="delModalLabel">
                    提示
                </h4>
            </div>
            <div class="modal-body">
                <input id="idDel" type="text" class="hidden">
                <p>确定删除？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="sureToDel" type="button" class="btn btn-danger" data-dismiss="modal">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 编辑-模态框（Modal） -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="editModalLabel">
                    提示
                </h4>
            </div>
            <div class="modal-body">
                <input id="idValue" type="text" class="hidden">
                <form name="add_user">
                    <!--<div class="panel-body">-->
                    <div>
                        <div class="box-body col-md-6">
                            <label for="telephone">用户手机号码</label>
                            <input id="telephone" type="text" class="form-control" placeholder="输入用户手机号码">
                            <br>
                            <label for="nickname">用户昵称</label>
                            <input id="nickname" type="text" class="form-control" placeholder="输入用户昵称">
                            <br>

                            <label for="realName">真实姓名</label>
                            <input id="realName" type="text" class="form-control" placeholder="输入真实姓名">
                            <br>
                            <label>用户性别</label>
                            <div>
                                <label class="fancy-radio">
                                    <input name="sex" value="male" type="radio">
                                    <span>
                                <i></i>男</span>
                                </label>
                                <label class="fancy-radio">
                                    <input name="sex" value="female" type="radio">
                                    <span>
                                <i></i>女</span>
                                </label>
                            </div>
                            <br>

                        </div>
                        <div class="box-body col-md-6">
                            <label for="location">用户所在地</label>
                            <input id="location" type="text" class="form-control" placeholder="输入用户所在地">
                            <br>
                            <label for="email">邮箱</label>
                            <input id="email" type="text" class="form-control" placeholder="输入用户邮箱">
                            <br>
                            <label for="education">文化程度</label>
                            <select id="education" class="form-control">
                                <option value="小学">小学</option>
                                <option value="初中">初中</option>
                                <option value="高中">高中</option>
                                <option value="本科">本科</option>
                                <option value="硕士">硕士</option>
                                <option value="博士">博士</option>
                            </select>
                            <br>
                            <label for="job">职业</label>
                            <input id="job" type="text" class="form-control" placeholder="输入用户职业">
                            <br>
                            <label>婚姻状况</label>
                            <div>
                                <label class="fancy-radio">
                                    <input name="marry" value="yes" type="radio">
                                    <span>
                                <i></i>已婚</span>
                                </label>
                                <label class="fancy-radio">
                                    <input name="marry" value="no" type="radio">
                                    <span>
                                <i></i>未婚</span>
                                </label>
                            </div>
                        </div>

                        <br>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="sureToUpdate" type="button" class="btn btn-danger" data-dismiss="modal">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--详情-模态框（Modal）-->
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="detailModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="detailModalLabel">
                    详细信息
                </h4>
            </div>

            <table>
                <td style="width: 20em; text-indent: 4em">
                    <p id="d_telephone"></p>
                    <p id="d_nickname"></p>
                    <p id="d_realName"></p>
                    <p id="d_sex"></p>
                </td>
                <td>
                    <p id="d_location"></p>
                    <p id="d_email"></p>
                    <p id="d_job"></p>
                    <p id="d_marry"></p>
                </td>
            </table>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal -->

</body>
<!--在这里定义或者引用你的script-->
<div th:fragment="script">

    <script>
        //删除
        $("#delModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            // alert(JSON.stringify(button))
            var id = button.data('id') //取得data-id 的值
            var modal = $(this)
            modal.find('.modal-body p').text('确定要删除手机号为 ' + id + "的医院信息吗")
            modal.find('.modal-body input').val(id)
        })
        $("#sureToDel").click(function () {
            var idDel = $("#idDel").val()
            $.post(
                "/user/delete",
                {tel: idDel},
                function () {
                    alert("删除成功")
                    $("#test").load(location.href + "#test");
                }
            )
        })

        //编辑
        $("#editModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            var id = button.data('id');//取得data-id 的值
            var modal = $(this);
            $.get(
                "/user/selectByTel",
                {tel: id},
                function (data) {
                    var user = data.value;
                    modal.find('#telephone').val(user.telephone)
                    modal.find('#nickname').val(user.nickname)
                    modal.find('#realName').val(user.realName)
                    modal.find('#sex').val(user.sex)
                    modal.find('#location').val(user.location)
                    modal.find('#email').val(user.email)
                    modal.find('#education').val(user.education)
                    modal.find('#job').val(user.job)
                    modal.find('#marry').val(user.marry)
                }
            )
        })
        $("#sureToUpdate").click(function () {
            $.ajax({
                    type: "post",
                    url: "/user/edit",
                    data:
                        {
                            telephone: $("#telephone").val(),
                            nickname: $("#nickname").val(),
                            realName: $("#realName").val(),
                            sex: $("#sex").val(),
                            location: $("#location").val(),
                            email: $("#email").val(),
                            education: $("#education").val(),
                            job: $("#job").val(),
                            marry: $("#marry").val()
                        },
                    success: function (data) {
                        if (data.code == 200) {
                            alert("修改成功")
                            $("#test").load(location.href + "#test");
                        } else {
                            alert("修改失败")
                        }
                    }
                }
            )
        })

        //详细信息
        $("#detailModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            var id = button.data('id');//取得data-id 的值
            var modal = $(this);
            $.get(
                "/user/selectByTel",
                {tel: id},
                function (data) {
                    var user = data.value;
                    modal.find('#d_telephone').text("手机号码：" + user.telephone)
                    modal.find('#d_nickname').text("昵称：" + user.nickname)
                    modal.find('#d_realName').text("真实姓名：" + user.realName)
                    modal.find('#d_sex').text("性别：" + user.sex)
                    modal.find('#d_location').text("所在地：" + user.location)
                    modal.find('#d_email').text("邮箱：" + user.email)
                    modal.find('#d_education').text("教育程度：" + user.education)
                    modal.find('#d_job').text("职业：" + user.job)
                    modal.find('#d_marry').text("婚姻情况：" + user.marry)
                }
            )
        })
    </script>


    //搜索框js
    <script>
        $("#search").click(function () {
            var id = $("#searchId").val();
            if ($.trim(id) == "") {
                $("#test").load("/test/userInfo?page=1");//重新加载整个<body>,定位到第一页
            }
            else if (id != "") {
                $.get(
                    "/user/selectByTel",
                    {tel: id},
                    function (data) {
                        $("#tbody").html("");
                        $("#paginationBar").html("");
                        var user = data.value;

                        var str =
                            "<tr>" +
                            "<td style=\"width: 10%\" >" + user.telephone + "</td>\n" +
                            "<td style=\"width: 10%\" >" + user.realName + "</td>\n" +
                            "<td style=\"width: 5%\" >" + user.sex + "</td>\n" +
                            "<td style=\"width: 10%\" >" + user.education + "</td>\n" +
                            "<td style=\"width: 20%\" >" + user.location + "</td>\n" +
                            "<td style=\"width: 15%\" >" + user.job + "</td>\n" +
                            "<td style=\"width: 10%\" >" + user.marry + "</td>\n" +
                            "<td style=\"width: 10%\" >\n" +
                            "    <nobr>\n" +
                            "        <button th:id=detail" + user.telephone + " class=\"btn btn-success btn-sm\" style=\"padding: 6px\" data-id=" + user.telephone + " data-target=\"#detailModal\" data-toggle=\"modal\">详情</button>\n" +
                            "        <button th:id=edit" + user.telephone + " class=\"btn btn-primary btn-sm\" style=\"padding: 6px\" data-id=" + user.telephone + " data-target=\"#editModal\" data-toggle=\"modal\">编辑</button>\n" +
                            "        <button id=del" + user.telephone + " class=\"btn btn-danger btn-sm\" style=\"padding: 6px\"   data-id=" + user.telephone + " data-target=\"#delModal\" data-toggle=\"modal\">删除</button>\n" +
                            "    </nobr>\n" +
                            "</td>"
                        "</tr>";

                        $("#tbody").html(str);

                    }
                )
            }
        })
    </script>

    //分页插件
    <script src="/static/common/assets/vendor/paginator/bootstrap-paginator.min.js"></script>
    <script th:inline="javascript" type='text/javascript'>
        var max = [[${maxPage}]];
        var cur = [[${currentPage}]];
        $('#pageLimit').bootstrapPaginator({
            currentPage: cur,
            totalPages: max + 1,
            size: "normal",
            bootstrapMajorVersion: 3,
            alignment: "right",
            numberOfPages: 5,
            // pageUrl:function(type, page, current){
            //     return "/test/hospitalInfo?page="+page
            // },
            itemTexts: function (type, page, current) {
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "末页";
                    case "page":
                        return page;
                }
            },//改写分页按钮字样
            onPageClicked: function (event, originalEvent, type, page) {
                //根据点击的页面，刷新整个body
                $("#test").load("/test/userInfo?page=" + page);
            }
        });
    </script>


</div>

</html>